<template>
  <div class="app-container">
    <div style="margin-bottom:20px;">
      <el-select v-model="currentRole" placeholder="请选择" @change="onSelected">
        <el-option
          v-for="item in roleFilter"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button
        type="primary"
        icon="el-icon-plus"
        style="float:right;"
        @click="handleAdd"
      >新增用户</el-button>
    </div>

    <my-table
      :users="users"
      :user-role="userRole"
      :list-loading="listLoading"
      @del-account="delAccount"
    />
    <my-dialog
      :dialog-status="dialogStatus"
      :temp="temp"
      :dialog-form-visible="dialogFormVisible"
      :click-dialog="clickDialog"
      @add-data="addData"
    />
  </div>
</template>

<script>
import {
  adminGetAccounts,
  adminAddAccount
} from '@/api/user'
import { delAccount } from '@/api/account'
import MyTable from './components/MyTable'
import MyDialog from './components/MyDialog'
import store from '@/store'

export default {
  name: 'User',
  components: {
    MyTable,
    MyDialog
  },
  data() {
    const IMAGE_FILE_NAME = 'userImage'
    return {
      imgUrl: process.env.VUE_APP_BASE_IMAGE_API + IMAGE_FILE_NAME,
      listLoading: false,
      accountParams: {
        pageNumber: -1,
        limit: -1,
        role: -1,
        account: store.getters.token
      },
      users: [],
      userRole: [],
      dialogStatus: 'add',
      dialogFormVisible: false,
      temp: {
        account: '',
        password: '',
        userName: '',
        image: '',
        sex: '',
        age: -1,
        province: '安徽省',
        city: '合肥市',
        county: '蜀山区',
        location: '',
        phone: '',
        role: 2
      },
      clickDialog: false,
      roleFilter: [
        {
          label: '默认',
          value: -1
        },
        {
          label: '超级管理员',
          value: 0
        },
        {
          label: '企业管理员',
          value: 4
        },
        {
          label: '基地管理员',
          value: 1
        },
        {
          label: '普通用户',
          value: 2
        }
      ],
      currentRole: -1
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      this.adminGetAccounts()
    },
    adminGetAccounts() {
      this.accountParams.role = Number.parseInt(this.currentRole)
      adminGetAccounts(this.accountParams)
        .then(response => {
          const users = response.accountInfo
          users.map(item => {
            if (item.image === '') {
              item.image = this.imgUrl + '/' + 'default.jpg'
            } else {
              item.image = this.imgUrl + '/' + item.image
            }
          })
          this.users = users
          this.userRole = response.accounts
          this.listLoading = false
        })
        .catch(error => {
          console.log(error)
        })
    },
    async refreshData() {
      const res = await adminGetAccounts(this.accountParams)
      const users = res.accountInfo
      users.map(item => {
        if (item.image === '') {
          item.image = this.imgUrl + '/' + 'default.jpg'
        } else {
          item.image = this.imgUrl + '/' + item.image
        }
      })
      this.users = users
      this.userRole = res.accounts
    },
    onSelected() {
      this.adminGetAccounts()
    },
    resetTemp() {
      this.temp = {
        account: '',
        password: '',
        userName: '',
        image: '',
        sex: '',
        age: -1,
        province: '安徽省',
        city: '合肥市',
        county: '蜀山区',
        location: '',
        phone: ''
      }
    },
    handleAdd() {
      this.dialogStatus = 'add'
      this.resetTemp()
      this.dialogFormVisible = true
      this.clickDialog = !this.clickDialog
    },
    addData() {
      adminAddAccount(this.temp)
        .then(response => {
          // this.users.unshift(this.temp)
          this.refreshData()
          this.dialogFormVisible = false
          this.$notify({
            title: '提示',
            message: '添加成功！',
            type: 'success',
            duration: 2000
          })
          this.$router.go(0)
        })
        .catch(error => {
          console.log(error)
        })
    },
    async delAccount(account) {
      const res = await delAccount({ account })
      if (res) {
        const index = this.users.findIndex(item => {
          return item.account === account
        })
        this.users.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功！'
        })
      }
    }
  }
}
</script>
